<template>
    <div class="app-container">
      <!-- <div v-if="checkPermission(['admin'])">
        <img :src="emptyGif" class="emptyGif">
      </div>

      <div v-else>
        我不是超级管理员
      </div> -->
        <!-- <div class="ivu-card-user">
          <div class="user-infor">
            <div class="user-infor-box">
              <div class="ivu-col ivu-col-span-8">
                  <i class="el-icon-user"></i>
              </div>
              
              <div class="ivu-col ivu-col-span-16" style="padding-left: 6px;">
                <p class="card-user-infor-name">{{viewUser.userId}}</p>
                <dd>下午好！</dd>
              </div>
            </div>

            <div class="ivu-col ivu-col-span-8">
              <div class="todayCont">今日登录次数：{{loginCount}}</div>
              <div>当前角色：{{viewUser.roleNames}}</div>

            </div>

          </div>  
        </div> -->

        <div class="itop">
          <div class="welcome">
            <p class="uesrNames">{{viewUser.userId}}<span>欢迎您来到后台管理系统</span></p>
            <p class="wenHao">{{day}}！</p>
          </div>
          <img data-v-26dc6394="" src="../../../static/header-bg.89b936bb.png" alt="" class="welcome-bg">
        </div>

        <div class='con'>
          <div class="ivu-mb">
            <div class="ivu-card">
              <div class="left-area">
                <i class="el-icon-video-play" style="color: rgb(255, 255, 255);"></i>
              </div>

              <div class="right-area">
                <div class="count-to-wrapper">
                  <p><countTo :startVal="startVal" :endVal="videoCount" :duration="3000" class="content-outer" style="color: #9a66e4;"></countTo><span>(个)</span></p>
                  <p class="text">视频上传</p>
                </div>
              </div>
            </div>
          </div>  

          <div class="ivu-mb">
            <div class="ivu-card">
              <div class="left-area" style="background: rgb(255, 153, 0);">
                <i class="el-icon-folder-add" style="color: rgb(255, 255, 255);"></i>
              </div>

              <div class="right-area">
                <div class="count-to-wrapper">
                  <p><countTo :startVal="startVal" :endVal="fileCount" :duration="3000" class="content-outer" style="color:rgb(255, 153, 0)"></countTo><span>(个)</span></p>
                  <p class="text">文件上传</p>
                </div>
              </div>
            </div>
            
          </div>    
          <div class="ivu-mb">
            <div class="ivu-card">
              <div class="left-area" style="background: rgb(25, 190, 107);">
                <i class="el-icon-edit-outline" style="color: rgb(255, 255, 255);"></i>
              </div>

              <div class="right-area">
                <div class="count-to-wrapper">
                  <p><countTo :startVal="startVal" :endVal="chechStatusCount" :duration="3000" class="content-outer" style="color:rgb(25, 190, 107)"></countTo><span>(个)</span></p>
                  <p class="text">待审核资源</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class='con'>  
          <div class="personal icar-char">
            <div class="personal-box">
              <div class="personal-title">个人信息</div>
              <img src="../../../static/bgDark.png" class="personal-avatar">
              <div class="personal-influence">
                <div class="personal-influence-item">
                  <div class="personal-influence-num color1" :title="viewUser.userName">{{viewUser.userName}}</div>
                  <div class="personal-influece-label">用户昵称</div>
                </div>
                <div class="personal-influence-item">
                  <div class="personal-influence-num color2">{{loginCount}}</div>
                  <div class="personal-influece-label">登录次数</div>
                </div>
                <div class="personal-influence-item">
                  <div class="personal-influence-num color3">{{computeCount}}</div>
                  <div class="personal-influece-label">资源总数</div>
                </div>
              </div>
              <div class="eidiName" @click="navto">修改资料</div>
            </div>
          </div>
          <div class="icar-char" id="charts">
            <Chart ref="Chart" class="bingtu"/>
          </div>

        </div>
    </div>
</template>

<script>
import checkPermission from '@/utils/permission' 
import { mapGetters, mapState } from "vuex";
import countTo from "vue-count-to";
import { indexData } from '@/api/request'
import Chart from './module/chart'
export default {
    name: "Dashboard",
    components: { countTo,Chart },
    computed:{
        computeCount() {
          let v1 = this.videoCount,
              f1 = this.fileCount;
          return    v1 + f1      
        }
    },
    data() {
        return {
            day:'',
            value: new Date(),
            startVal: 0,
            eal: 2019,
            videoCount:0,
            fileCount:0,
            chechStatusCount:0,    //待审核资源
            loginCount:'',         //当天登录次数
            viewUser:'',
            picurl: 'https://wpimg.wallstcn.com/0e03b7da-db9e-4819-ba10-9016ddfdaed3',
        };
    },
    // computed: {
    //     ...mapGetters(["roles"]),
    //     ...mapState(["Test"])
    // },
    
    mounted(){
      this.readly();
      this.getDay()
    },
    methods:{
      checkPermission,
      readly(){
        indexData().then(res=>{
          this.viewUser = res.data.viewUser
          this.chechStatusCount = res.data.chechStatusCount
          this.fileCount = res.data.fileCount
          this.loginCount = res.data.loginCount
          this.videoCount = res.data.videoCount
          if (res.data.viewUser.picurl) {
            this.picurl = res.data.viewUser.picurl
          }
          this.$refs.Chart.drawBarChart();
        }) 
      },
      navto(){
        this.$router.push({
          path:'/user/center'
        })
      },
      getDay(){
        let time=new Date().getHours();
        console.log(time)
        if(time >=5  && time<12){
          this.day = '上午好'
          return
        }
        if(time >=12  && time<19){
          this.day = '下午好'
          return
        }else{
          this.day = '晚上好'
          return
        }
      }
    },
};
</script>

<style lang="scss" scoped>
.app-container{
  background-color: #F0F2F5;
  min-height: calc(100vh - 120px)!important;
}
.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}
.dashboard-editor-container {
  background-color: #e3e3e3;
  min-height: 100vh;
  padding: 50px 60px 0px;
  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }
  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;
    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}

.ivu-card-user{
  background-color: #fff;
  border-radius: 4px;
  margin: 0 20px;
  .user-infor{
    margin:0 16px;
    padding:16px 0;
    .user-infor-box{
      zoom: 1;
      border-bottom: 1px solid #dcdcdc;
      &:after{
        display:block;clear:both;content:"";
      }
      .ivu-col-span-8 {
        display: block;
        width: 33.33333333%;
        font-size: 112px;
        float: left;
        color: #ccc;
      }
      .ivu-col-span-16 {
        display: block;
        width: 66.66666667%;
        .card-user-infor-name{
          font-size:40px;
          line-height:40px;
        }
      }
    }
    .todayCont{
      padding:10px 0;
    }
  }
}

p{
  margin:0;padding:0;
}

.itop{
  position: relative;
  height: 210px;
  background: #4577ff;
  -webkit-box-shadow: 0 2px 14px 0 #f3f3f3;
  box-shadow: 0 2px 14px 0 #f3f3f3;
  border-radius: 8px;
  margin: 20px;
  overflow: hidden;
  .uesrNames{
    margin: 40px 0 0 30px;
    color: #fff;
    font-size: 50px;
    span{
      font-size: 30px;
      margin-left: 15px;
      color: #eee;
    }
  }
  .wenHao{
    margin-top:40px;
    color: #fff;
    font-size: 22px;
    margin-left: 30px;
  }
  .welcome-bg{
    position: absolute;
    bottom: 0;
    right: 10px;
    width: 800px;
    height: 121px;
  }
}
.con{
    //margin-left: -20px;
    //margin-right: -20px;
    zoom:1;
    &:after{display:block;clear:both;content:"";}
    .ivu-mb{
      padding: 20px;
      float: left;
      width: 33.3333%;
      .ivu-card{
        border-radius: 5px;
        background: #fff;
        height: 150px;
        .left-area{
          width: 36%;
          float: left;
          height: 100%;
          display: table;
          text-align: center;
          height: 100%;
          background: rgb(154, 102, 228);
          border-bottom-left-radius:5px;
          border-top-left-radius:5px;
          line-height: 150px;
          i{
            font-size: 60px;
            line-height: 60px;
            vertical-align: middle;
          }
        }
        .right-area{
          text-align: center;
          .content-outer{
            font-size: 50px;
            height: 105px;
            line-height: 105px;
            color: #333;
            span{
              font-size: 15px;
              margin-left: 6px;
              color: #999;
            }
          }
          .text{
            color: #666;
          }
        }
          
      }    
    }
    .icar-char{
      padding: 20px;
      float: left;
      width: 50%;
    }
}
#charts{
  box-shadow: 0 2px 14px 0 #f3f3f3;
  border-radius: 8px;
  .bingtu{
    padding: 32px 25px;
    background: #fff;
    -webkit-box-shadow: 0 2px 14px 0 #f3f3f3;
    box-shadow: 0 2px 14px 0 #f3f3f3;
    border-radius: 8px;
  }
}
.personal{
  width: 320px;
  height: 100%;
  // margin-right: 20px;
  .personal-box{
    padding: 32px 25px;
    text-align: center;
    background: #fff;
    -webkit-box-shadow: 0 2px 14px 0 #f3f3f3;
    box-shadow: 0 2px 14px 0 #f3f3f3;
    border-radius: 8px;
    .personal-title{
      height: 22px;
      line-height: 22px;
      font-weight: 500;
      color: #596c8e;
      font-size: 16px;
      text-align: left;
    }
    .personal-avatar{
      width: 140px;
      height: 140px;
      margin-top: 15px;
      margin-bottom: 25px;
      border-radius: 75px;
      -webkit-box-shadow: 0 0 30px 0 #cfd5e3;
      box-shadow: 0 0 30px 0 #cfd5e3;
    }
    .personal-influence{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      padding: 0 30px 40px;
      .personal-influence-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        .personal-influence-num{
          font-size: 22px;
          line-height: 34px;
        }
        .color1{
          color: #00c292;
          max-width: 270px;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          font-size: 12px;
        }
        .color2{
          color: red;
        }
        .color3{
          color: #03a9f3;
        }
        .personal-influece-label{
          font-size: 12px;
          font-weight: 400;
          color: #8c98ae;
          line-height: 17px;
        }
      }
    }
    .eidiName{
      color: #999;
      font-size: 12px;
      cursor: pointer;
    }
  }
}
@media (min-width: 300px) and (max-width: 1199px){
    .con .ivu-mb{
      width: 100%;
    }
    .itop .uesrNames{
       font-size: 20px;
    }
    .itop .uesrNames span{
      font-size: 12px;
    }
    .itop .welcome-bg{
      display: none;
    }
    .con .icar-char{
      width: 100%;
    }
}
@media (min-width: 1200px) and (max-width: 1920px){
    .con .ivu-mb{
      width: 33.3333%;
    }
    .con .icar-char{
      width: 50%;
    }
}
</style>
